<script setup lang="ts">
import { ref } from 'vue'

import MessageInput from './components/MessageInput.vue'
import MessageList from './components/MessageList.vue'
import Icons from './components/Icons.vue'
import { useStatusStore } from './stores/status';
import { useLLMStore } from './stores/llm'
import { useIconsStore } from './stores/icons';
import { useListStore } from './stores/list'
import { Llm_id, State, changeIcon, changeLLM, changeList } from './utils/utils';
import hotkeys from 'hotkeys-js';

const llm = useLLMStore()
const flag = ref(false)
const icons = useIconsStore()
const input_msg = ref('you are good at cs programming')
const height = ref('')
const status = useStatusStore()
const baseURL = ref('')
const lists = useListStore()

const auto_location = ref({
  top: 200 + 'px',
  left: 100 + 'px',
})


function setCurrentIcon() {
  if (llm.llm == 'doubao') icons.changeIcons(Llm_id.doubao)
  else if (llm.llm == 'spark') icons.changeIcons(Llm_id.spark)
  else if (llm.llm == 'qwen') icons.changeIcons(Llm_id.qwen)
  else if (llm.llm == 'yiyan') icons.changeIcons(Llm_id.yiyan)
  else if (llm.llm == 'glm') icons.changeIcons(Llm_id.glm)
  else if (llm.llm == 'gemini') icons.changeIcons(Llm_id.gemini)
}
setCurrentIcon()
function getWindowHeight() {
  height.value = '{ height:' + (window.innerHeight - 20) + 'px;}'
  console.log(height.value)

}
window.onload = function () {
  let height = window.innerHeight
  let width = window.innerWidth
  auto_location.value.top = height / 3 + 'px'
  console.log('height:' + height, 'width:' + width);
  auto_location.value.left = width / 3 + 'px'
  console.log(auto_location.value)
  // localStorage.removeItem('access_token')
  status.setStatus(State.working)
  if (localStorage.getItem('baseURL') != null) {
  } else {
    flag.value = true
    // status.setStatus(State.working)
  }
}
getWindowHeight()
// handler for hotkeys scroll to bottom
function handleScrollToBottom() {
  console.log('handleScrollToBottom');
  const list = document.querySelector('.message_list');
  if (list) {
    list.scrollTop = list.scrollHeight;
  }
}

function change(llm_id: Llm_id) {
    changeList(llm_id, (llm_id) => {
        lists.changeCurrentList(llm_id)
    })
    changeIcon(llm_id, (llm_id) => {
        icons.changeIcons(llm_id)
    })
    changeLLM(llm_id, (llm_id) => {
        llm.change(llm_id)
        status.changeLlmId(llm_id)

    })
}
// handle scroll to bottom
hotkeys('ctrl+space', function () {
  console.log('ctrl+space');
  handleScrollToBottom()
});
// handle switch to yiyan
hotkeys('ctrl+shift+y', function (event) {
  event.preventDefault();
  console.log('ctrl+ctrl+shift+y');
  change(Llm_id.yiyan)
});
// handle switch to glm
hotkeys('ctrl+shift+g', function (event) {
  event.preventDefault();
  console.log('ctrl+ctrl+shift+g');
  change(Llm_id.glm)
});
// handle switch to qwen
hotkeys('ctrl+shift+q', function (event) {
  event.preventDefault();
  console.log('ctrl+ctrl+shift+q');
  change(Llm_id.qwen)
});
// handle switch to doubao
hotkeys('ctrl+shift+d', function (event) {
  event.preventDefault();
  console.log('ctrl+ctrl+shift+d');
  change(Llm_id.doubao)
});
// handle switch to spark
hotkeys('ctrl+shift+s', function (event) {
  event.preventDefault();
  console.log('ctrl+ctrl+shift+s');
  change(Llm_id.spark)
});

// async function rules(value: string) {
//   // ssrRenderTeleport()
//   flag.value = true
//   status.setStatus(State.loading)
//   localStorage.setItem('baseURL', value)
//   status.setStatus(State.working)
//   flag.value = false

//   return new Promise(() => { console.log('rules:' + value) })

// }
// function submit() {
//   console.log('submit');

// }
</script>

<template>
  <div class="llm-icons">
    <Icons></Icons>
  </div>

  <!-- <v-overlay v-model="flag" scroll-strategy="close" :style="auto_location">
    <v-form validate-on="submit lazy" style="background-color: aliceblue;" @submit.prevent="submit">
      <v-text-field v-model="baseURL" color="primary" :rules="[rules]" min-width="300px" label="baseURL"></v-text-field>
      <v-btn :loading="status.getStatus() == State.loading" class="mt-2" text="Submit" type="submit" block></v-btn>
    </v-form>
  </v-overlay> -->
  <MessageList class="message_list" :style="height"></MessageList>

  <MessageInput :msg="input_msg" class="message_input"></MessageInput>

</template>


<style scoped>
@media screen and (min-height: 600px) {
  .message_list {
    overflow-y: scroll;
    height: 600px;
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 50px;

    /* bottom: 50px; */
  }
}

@media screen and (max-height: 500px) {
  .message_list {
    overflow-y: scroll;
    max-height: 450px;
    padding-top: 3%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 50px;

  }
}




.message_input {
  position: fixed;
  bottom: 50px;
  left: 20%;
  right: 20%;
}

.llm-icons {
  position: fixed;
  bottom: 50px;
  left: 20px;
  /* right: 20px; */

}

.v-overlay {

  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 100px;
}
</style>
